import './FormTemp.scss'
import { v4 } from 'uuid'
import {
    ProForm,
    ProFormCascader,
    ProFormCheckbox,
    ProFormColorPicker,
    ProFormDigit,
    ProFormDigitRange,
    ProFormGroup,
    ProFormRadio,
    ProFormRate,
    ProFormSegmented,
    ProFormSelect,
    ProFormSlider,
    ProFormSwitch,
    ProFormText,
    ProFormUploadButton,
    ProFormUploadDragger,
    ProFormTextArea,
    ProFormCaptcha,
    ProFormTreeSelect,

    ProFormDependency,
    ProFormList,
    ProCard,

    ProFormDateMonthRangePicker,
    ProFormDatePicker,
    ProFormDateQuarterRangePicker,
    ProFormDateRangePicker,
    ProFormDateTimePicker,
    ProFormDateTimeRangePicker,
    ProFormDateWeekRangePicker,
    ProFormDateYearRangePicker,
    ProFormTimePicker,

} from '@ant-design/pro-components'

import { DeleteOutlined, CopyOutlined } from '@ant-design/icons'

import { useMount, useDebounceFn } from 'ahooks'
import { useEffect, useRef, useState } from 'react'
import { Spin, Form, Image, App, Button } from "antd"


import { API_Mapping } from './Api'
import { convertMetaColorToHex } from '.'
import { ICONMapping } from '../Config/IconMapping'
import { BackGrundTypeConfig } from '../Config/BackGrundType'


const { WinBox } = window
const { Password } = ProFormText
const { Week, Month, Quarter, Year } = ProFormDatePicker
const { RangePicker } = ProFormTimePicker

export const FormTempMapping = ({ formItem, FORMEVENT, Initial = {}, NotSubmit, NotLoading, detection, onCallBack }) => {
    const formRef = useRef()
    const [Loading, setLoading] = useState(false)
    const [INIT] = useState(Initial)
    const { run } = useDebounceFn((e) => {
        FORMEVENT.emit({ type: 'onDetection', data: convertMetaColorToHex(e) })
    }, { wait: 500 })

    const onFinish = async (e) => {
        FORMEVENT.emit({ type: 'onFormBack', data: { ...e, onCallBack } })
        setLoading(NotLoading ? false : true)
    }

    FORMEVENT.useSubscription(val => {
        const { type, data } = val
        // 关闭加载状态
        if (type === 'closeFormLoading') setLoading(false)
    })

    useEffect(() => {
        formRef.current.setFieldsValue(Initial)
    }, [Initial])

    return (
        <div className='FormTempMapping'>
            <Spin spinning={Loading}>
                <ProForm
                    formRef={formRef}
                    grid={true}
                    readonly={false}
                    name="validate_other"
                    initialValues={INIT}
                    onFinish={onFinish}
                    onValuesChange={e => detection && run(e)}
                    submitter={{ render: (_, dom) => NotSubmit ? '' : <div className='FormTempSubmit'>{dom}</div> }}
                >
                    {formItem?.map((item) => {
                        const Template = TemplateMapping[item.formType]
                        return <Template key={item.name} data={item} form={formRef} init={Initial} />
                    })}
                </ProForm>
            </Spin>
        </div>
    )
}

// Todo 渲染判断
const JudgeTemplate = ({ jugdeField, jugdeValue, Template }) => {
    return (
        <ProFormDependency name={[jugdeField]}>
            {e => {
                const value = typeof (jugdeField) === 'object' ? jugdeField.reduce((current, key) => current?.[key], e) ?? undefined : e[jugdeField]
                if (jugdeValue.includes(value)) return <Template />
                return false
            }}
        </ProFormDependency>
    )
}

// !!! 数据分组
// TODO 数组分组
const LIST = ({ data, form }) => {
    const { name, label, tooltip, jugdeField, jugdeValue = [], children } = data
    const Template = () => (
        <ProFormList
            name={name}
            label={label}
            tooltip={tooltip}
            copyIconProps={{ Icon: CopyOutlined, tooltipText: '复制此行' }}
            deleteIconProps={{ Icon: DeleteOutlined, tooltipText: '删除此行' }}
            itemRender={({ listDom, action }, { index }) => {
                return (<ProCard bordered collapsible={true} extra={action} title={`分组${index + 1}`}>{listDom}</ProCard>)
            }}
        >
            {(_, index, action) => {
                return (
                    <ProFormGroup key="group">
                        {children.map((item, key) => {
                            const Template = TemplateMapping[item.formType]
                            return <Template key={key} data={item} form={form} action={action} />

                        })}
                    </ProFormGroup>
                )
            }}
        </ProFormList>
    )

    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}

// TODO 对象分组
const OBJECT = ({ data, form }) => {
    const { name, label, tooltip, jugdeField, jugdeValue = [], children } = data
    const Template = ({ data, form }) => (
        <ProFormGroup key="group">
            {children.map((item, key) => {
                const Template = TemplateMapping[item.formType]
                return <Template key={key} data={item} form={form} superior={name} />
            })}
        </ProFormGroup>
    )

    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}


// !!!  基础组件
// Todo 隐藏框
const HIDDEN = ({ data }) => {
    const { name } = data
    return (
        <div style={{ display: 'none' }}>
            <ProFormText name={name} />
        </div>
    )
}
// Todo 文本框
const INPUT = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormText
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请输入${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 密码框
const PASSWORD = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <Password
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请输入${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 富文本
const TEXTAREA = ({ data }) => {
    const { name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormTextArea
            colProps={{ span: 24 }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请输入${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 验证框 (未启用)
const TempProFormCaptcha = () => {
    return (
        <div>验证框</div>
    )
}
// Todo 数字框
const NUMBER = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, min, max, step, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDigit
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请输入${label}`}
            min={min ?? Number.MIN_SAFE_INTEGER}
            max={max ?? Number.MAX_SAFE_INTEGER}
            fieldProps={{ step: step || 1 }}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 范围框
const RANGE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDigitRange
            colProps={{ span }}
            separator="-"
            separatorWidth={60}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder ? placeholder.split(',') : ['最小值', '最大值']}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 滑动条
const SLIDER = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, marks, min, max, step, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormSlider
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            marks={marks}
            min={min || 0}
            max={max || 100}
            step={step || 0}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 评分框
const RATE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormRate
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 时间
const TIME = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormTimePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 日期
const DATE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDatePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 日期时间
const DATETIME = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDateTimePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 周
const WEEK = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <Week
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 月
const MONTH = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <Month
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 季
const QUARTER = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <Quarter
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 年
const YEAR = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <Year
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 时间区间
const TIMERANGE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <RangePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 日期区间
const DATERANGE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDateRangePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 日期时间区间
const DATETIMERANGE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDateTimeRangePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 周区间
const WEEKRANGE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDateWeekRangePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 月区间
const MONTHRANGE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDateMonthRangePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 季区间
const QUARTERRANGE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDateQuarterRangePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 年区间
const YEARRANGE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormDateYearRangePicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 颜色选择
const COLOR = ({ data, form, action }) => {
    const { run } = useDebounceFn((name, color) => { action.setCurrentRowData({ [name]: color }) }, { wait: 500 })
    const { span, name, label, tooltip, rules = false, disabled = false, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormColorPicker
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            fieldProps={{ mode: ['single', 'gradient'] }}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            onChange={e => {
                const { colors } = e
                const valueToSet = colors && Array.isArray(colors) ? colors.map(({ color, percent }) => ({ color: color.toHexString(), percent })) : e.toHexString()
                if (action) {
                    // action.setCurrentRowData({ [name]: valueToSet })
                    run(name, valueToSet)
                }
                else {
                    const value = typeof (name) === 'string' ? [name] : [...name]
                    form.current.setFieldValue(value, valueToSet)
                }
            }}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo Radio单选
const RADIO = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, valueEnum, request, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <div className='RADIO' style={{ width: `${100 / 24 * span}%` }}>
            <ProFormRadio.Group
                radioType="button"
                name={name}
                label={label}
                tooltip={tooltip}
                disabled={disabled}
                rules={[{ required: !!rules, message: `${label}必须输入` }]}
                request={async () => {
                    let data = []
                    if (request) data = await API_Mapping[request]()
                    else data = valueEnum
                    return data
                }}
            />
        </div>
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo Select单选
const SELECT = ({ data, superior }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, valueEnum, request, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormSelect
            colProps={{ span }}
            showSearch
            name={name}
            // name={superior ? [superior, name] : name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
            request={async () => {
                let data = []
                if (request) data = await API_Mapping[request]()
                else data = valueEnum
                return data
            }}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo Select多选
const SELECTM = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, valueEnum, request, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormSelect
            colProps={{ span }}
            fieldProps={{ mode: 'multiple' }}
            showSearch
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
            request={async () => {
                let data = []
                if (request) data = await API_Mapping[request]()
                else data = valueEnum
                return data
            }}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 树形单选
const TREE = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, valueEnum, request, placeholder, jugdeField, jugdeValue = [] } = data
    console.log(data)
    const Template = () => (
        <ProFormTreeSelect
            colProps={{ span }}
            fieldProps={{ showSearch: true, treeNodeFilterProp: 'label', fieldNames: { title: 'label', key: 'uuid' } }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
            request={async () => {
                let data = []
                if (request) data = await API_Mapping[request]()
                else data = valueEnum
                return data
            }}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 树形多选
const TREEM = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, valueEnum, request, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormTreeSelect
            colProps={{ span }}
            fieldProps={{ multiple: true, treeNodeFilterProp: 'label', fieldNames: { title: 'label' } }}
            showSearch
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
            request={async () => {
                let data = []
                if (request) data = await API_Mapping[request]()
                else data = valueEnum
                return data
            }}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 联级选择
const CASCADER = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, valueEnum, request, placeholder, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <ProFormCascader
            colProps={{ span }}
            fieldProps={{ changeOnSelect: true }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请选择${label}`}
            request={async () => {
                let data = []
                if (request) data = await API_Mapping[request]()
                else data = valueEnum
                return data
            }}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}

// TODO 单选列表
const RADIOLIST = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, valueEnum, placeholder, request, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <div className='RADIOLIST' style={{ width: `${100 / 24 * span}%` }}>
            <ProFormRadio.Group
                colProps={{ span }}
                name={name}
                label={label}
                tooltip={tooltip}
                disabled={disabled}
                layout="vertical"
                rules={[{ required: !!rules, message: `${label}必须输入` }]}
                placeholder={placeholder || `请选择${label}`}
                request={async () => {
                    let data = []
                    if (request) data = await API_Mapping[request]()
                    else data = valueEnum
                    return data
                }}
            />
        </div>
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}

// TODO 多选列表
const CHECKBOXLIST = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, valueEnum, placeholder, request, jugdeField, jugdeValue = [] } = data
    const Template = () => (
        <div className="RADIOLIST" style={{ width: `${100 / 24 * span}%` }}>
            <ProFormCheckbox.Group
                colProps={{ span }}
                name={name}
                label={label}
                tooltip={tooltip}
                disabled={disabled}
                layout="vertical"
                rules={[{ required: !!rules, message: `${label}必须输入` }]}
                placeholder={placeholder || `请选择${label}`}
                request={async () => {
                    let data = []
                    if (request) data = await API_Mapping[request]()
                    else data = valueEnum
                    return data
                }}
            />
        </div>
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}

// *** 上传检测
const beforeUpload = (file, fileType, fileSize, message) => {
    const { type, size } = file
    const typeMapping = {
        img: ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
        mp4: ['video/mp4'],
        txt: [
            'application/pdf',
            'text/plain',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        ],
        zip: ['application/x-zip-compressed', 'application/x-compressed']
    }

    const typeJudge = fileType.flatMap(key => typeMapping[key] || [])
    const isJpgOrPng = typeJudge.includes(type)
    if (!isJpgOrPng) {
        message.error('不支持当前文件类型!')
        return false
    }
    const isLt = size <= fileSize * 1024 * 1024 * 1024
    if (!isLt) {
        message.error(`文件体积大于 ${fileSize}GB !!`)
        return false
    }
    return isJpgOrPng && isLt
}
// Todo 上传附件 - 数组形式
const UPLOAD = ({ data, form }) => {
    const { message } = App.useApp()
    const { span, name, label, tooltip, max = 1, fileType, fileSize = 1, rules = false, disabled = false, jugdeField, jugdeValue = [], fileData = {} } = data
    const API = sessionStorage.getItem('API')
    const Template = () => {
        const [visible, setVisible] = useState(false)
        const [ImageUrl, setImageUrl] = useState(false)
        const [fileList, setFileList] = useState([])
        useMount(() => setFileList(form.current?.getFieldValue(name)))
        return (
            <>
                {/* {console.log('fileList--附件列表', fileList)} */}
                <ProFormUploadButton
                    colProps={{ span }}
                    max={max}
                    name={name}
                    label={label}
                    tooltip={tooltip}
                    disabled={disabled}
                    title='上传'
                    action={API + '/attachments'}
                    fieldProps={{
                        name: 'file',
                        listType: 'picture-card',
                        fileList,
                        data: fileData,
                        beforeUpload: e => beforeUpload(e, fileType, fileSize, message),
                        onPreview: e => {
                            setVisible(true)
                            setImageUrl(e.url || e.thumbUrl)
                        },
                        onChange: e => {
                            const { file, fileList } = e
                            const { status } = file
                            setFileList(fileList)
                            if (status === 'done') {
                                fileList.pop()
                                const { uuid, fileUrl } = file.response.data
                                fileList.push({ uuid, url: fileUrl })
                                setFileList(fileList)
                            } else if (!status) {
                                fileList.pop()
                                setFileList(fileList)
                            }
                        }
                    }}
                    rules={[{ required: !!rules, message: `${label}必须输入` }]}
                />
                {visible &&
                    <Image
                        wrapperStyle={{ display: 'none' }}
                        preview={{
                            visible,
                            onVisibleChange: visible => setVisible(visible),
                            afterOpenChange: visible => !visible && setImageUrl(''),
                        }}
                        src={ImageUrl}
                    />
                }
            </>
        )
    }
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}

// Todo 上传附件 - 对象形式
const UPLOADOBJ = ({ data }) => {
    return (
        <div>对象数据</div>
    )
}

// !!!  自定义组件
// Todo 空标题
const TempTitle = ({ data }) => {
    const { label, jugdeField, jugdeValue = [] } = data
    const Template = () => (<div className='TempTitle'>{label}</div>)
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}
// Todo 背景墙设置
const TempBackGrund = ({ data, form }) => {
    const { name, jugdeField, jugdeValue, backGrundType } = data
    const Template = ({ type, init }) => {
        return (
            <ProFormGroup key='TempBackGrund'>
                {Object.keys(BackGrundTypeConfig[type]).map((key, index) => {
                    if (key.includes('color')) {
                        return (
                            <ProFormColorPicker
                                key={key}
                                name={[name, key]}
                                label='背景颜色'
                                rules={[{ required: true, message: '必须选择背景颜色' }]}
                                onChange={e => {
                                    const { colors } = e
                                    const valueToSet = colors && Array.isArray(colors) ? colors.map(({ color, percent }) => ({ color: color.toHexString(), percent })) : e.toHexString()
                                    form.current?.setFieldValue([name, key], valueToSet)
                                }}
                            />
                        )
                    }
                    if (key.includes('size')) {
                        return (
                            <ProFormDigit
                                key={key}
                                name={[name, key]}
                                label='背景尺寸'
                                rules={[{ required: true, message: '必须填写背景颜色' }]}
                            />
                        )
                    }
                })}
            </ProFormGroup>
        )
    }
    return (
        <ProFormDependency name={[name, jugdeField, backGrundType]} >
            {e => {
                if (jugdeValue.includes(e[jugdeField])) return (<Template type={e[backGrundType]} init={e[name]} />)
                return false
            }}
        </ProFormDependency >
    )
}
// Todo 选择图标
const TempICON = ({ data, form, action }) => {
    const { name, label, tooltip, rules, valueEnum, request, placeholder, jugdeField, jugdeValue = [] } = data

    const [Active, setActive] = useState()

    const onClick = (e) => {
        setActive(e)
        if (action) action.setCurrentRowData({ [name]: e })
        else form.current.setFieldsValue({ [name]: e })
    }

    useMount(() => {
        if (action) setActive(action.getCurrentRowData()[name])
        else setActive(form.current.getFieldValue(name))
    })

    const Template = () => (
        <div className='TempICON'>
            <Form.Item
                name={name}
                label={label}
                tooltip={tooltip}
                rules={[{ required: !!rules, message: `${label}必须输入` }]}
            >
                <div className='SelectIconBox'>
                    {Object.keys(ICONMapping).map(key =>
                        <div
                            key={key}
                            onClick={() => onClick(key)}
                            className={Active === key ? 'active' : ''}
                        >
                            {ICONMapping[key]}
                        </div>
                    )}
                </div>
            </Form.Item>
        </div>
    )

    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}

// Todo Input链接
const TempInputLink = ({ data }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [], urlLink, urlBtn } = data
    const onOpenLine = () => {
        new WinBox({
            title: urlBtn,
            x: "center",
            y: "center",
            width: "80%",
            height: "80%",
            zIndex: 1001,
            background: 'linear-gradient(45deg, #ff00f0, #0050ff)',
            html: `<iframe src="${urlLink}" frameborder="0" allowfullscreen></iframe>`,
        })
    }

    const Template = () => (
        <ProFormText
            colProps={{ span }}
            name={name}
            label={label}
            tooltip={tooltip}
            disabled={disabled}
            rules={[{ required: !!rules, message: `${label}必须输入` }]}
            placeholder={placeholder || `请输入${label}`}
            fieldProps={{ addonAfter: <Button className='LinkButton' type='line' size='large' onClick={onOpenLine}>{urlBtn}</Button> }}
        />
    )
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}

// Todo 经纬度
const TempPosition = ({ data, form, init }) => {
    const { span, name, label, tooltip, rules = false, disabled = false, placeholder, jugdeField, jugdeValue = [], urlLink, urlBtn } = data
    const Template = () => {
        useEffect(() => {
            const [lng, lat, alt] = init.position
            form.current.setFieldValue('lng', lng)
            form.current.setFieldValue('lat', lat)
            form.current.setFieldValue('alt', alt)
        }, [])

        return (
            <>
                <div style={{ display: 'none' }}>
                    <ProFormText name={name} />
                </div>
                <ProFormDigit
                    colProps={{ span }}
                    name='lng'
                    label='经度'
                    tooltip={tooltip}
                    disabled={disabled}
                    rules={[{ required: !!rules, message: `经度必须输入` }]}
                    placeholder={placeholder || `请输入经度`}
                    onChange={e => {
                        const posi = init.position
                        posi[0] = e
                        form.current.setFieldValue(name, posi)
                    }}
                />
                <ProFormDigit
                    colProps={{ span }}
                    name='lat'
                    label='纬度'
                    tooltip={tooltip}
                    disabled={disabled}
                    rules={[{ required: !!rules, message: `纬度必须输入` }]}
                    placeholder={placeholder || `请输入纬度`}
                    onChange={e => {
                        const posi = init.position
                        posi[1] = e
                        form.current.setFieldValue(name, posi)
                    }}
                />
                <ProFormDigit
                    colProps={{ span }}
                    name='alt'
                    label='高程'
                    tooltip={tooltip}
                    disabled={disabled}
                    rules={[{ required: !!rules, message: `高程必须输入` }]}
                    placeholder={placeholder || `请输入高程`}
                    onChange={e => {
                        const posi = init.position
                        posi[2] = e
                        form.current.setFieldValue(name, posi)
                    }}
                />
            </>
        )
    }
    if (jugdeField) return <JudgeTemplate jugdeField={jugdeField} jugdeValue={jugdeValue} Template={Template} />
    else return <Template />
}


const TemplateMapping = {
    LIST,
    OBJECT,
    HIDDEN,
    INPUT,
    PASSWORD,
    TEXTAREA,
    NUMBER,
    RANGE,
    SLIDER,
    RATE,
    COLOR,
    RADIO,
    SELECT,
    SELECTM,
    TREE,
    TREEM,
    CASCADER,
    TIME,
    DATE,
    DATETIME,
    WEEK,
    MONTH,
    QUARTER,
    YEAR,
    TIMERANGE,
    DATERANGE,
    DATETIMERANGE,
    WEEKRANGE,
    MONTHRANGE,
    QUARTERRANGE,
    YEARRANGE,
    UPLOAD,
    UPLOADOBJ,

    TempProFormCaptcha,
    TempTitle,
    TempBackGrund,
    TempICON,
    TempInputLink,
    TempPosition,
    RADIOLIST,
    CHECKBOXLIST
}